<template>
  <div
    ref="rightClickMenu"
    class="right-click-menu"
    :class="actived ? 'actived' : ''"
  >
    <ul>
      <li
        class="menu-item"
        v-for="(command, commandIdx) in items"
        :key="commandIdx"
      >
        <div
          v-if="command.enName !== 'divider'"
          class="normal"
          @click="handleItemClick(command.enName)"
        >
          <i
            class="icon iconfont"
            :class="command.icon ? command.icon : ''"
          ></i>
          <span class="name">{{ command.name }}</span>
          <span class="shortcut-key">{{ command.shortcutKey }}</span>
        </div>
        <div v-else class="divider"></div>
      </li>
    </ul>
  </div>
</template>

<script>
import items from "./items";
import EventBus from "../../event-bus/index";
import BusEvents from "../../event-bus/event-types";

export default {
  name: "right-click-menu",
  props: {
    actived: {
      type: Boolean,
      default: false,
    },
    node: Object,
    position: Object,
  },
  data() {
    return {
      // 视口的宽高
      clientWidth: document.body.clientWidth,
      clientHeight: document.body.clientHeight,
      items,
    };
  },
  computed: {
    // 返回 right-click-menu 的宽高
    menuWidth() {
      return this.$refs["rightClickMenu"].clientWidth;
    },
    menuHeigth() {
      return this.$refs["rightClickMenu"].clientHeight;
    },
  },
  watch: {
    actived() {
      if (this.actived) {
        const oRightClickMenu = this.$refs["rightClickMenu"];
        let left = this.position.x,
          top = this.position.y;
        if (this.position.x + this.menuWidth > this.clientWidth) {
          left = this.clientWidth - this.menuWidth - 10;
        }
        if (this.position.y + this.menuHeigth > this.clientHeight) {
          top = this.clientHeight - this.menuHeigth - 10;
        }
        oRightClickMenu.style.left = `${left}px`;
        oRightClickMenu.style.top = `${top}px`;
      }
    },
  },
  methods: {
    handleItemClick(enName) {
      console.log(enName);
      switch (enName) {
        case "copy":
          EventBus.$emit(BusEvents.COMMAND_COPY);
          break;
        case "paste":
          EventBus.$emit(BusEvents.COMMAND_PASTE);
          break;
        case "enter-subsystem":
          // 相当于是执行了双击操作，后面限制普通节点点击即可
          EventBus.$emit(BusEvents.INTERACT_DOUBLE_CLICK_NODE, {
            node: this.node,
          });
          break;
        case "edit-inner-func":
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.right-click-menu {
  position: absolute;
  // top: 30px;
  // left: 10px;

  cursor: pointer;
  font-size: 13px;
  line-height: 30px;
  visibility: hidden;
  user-select: none;

  &.actived {
    visibility: visible;
  }

  ul {
    width: 220px;
    padding: 4px 0;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 1px 1px 1px 1px #dcdcdc;
    z-index: 19;

    .menu-item {
      &:hover {
        background-color: #eeeeee;
      }

      .normal {
        height: 30px;
        display: flex;

        .icon {
          width: 30px;
          height: 30px;
          margin-left: 2px;

          display: flex;
          justify-content: center;
        }

        .name {
          margin-left: 2px;
          margin-right: auto;
        }

        .shortcut-key {
          margin-right: 10px;
          color: #777777;
        }
      }

      .divider {
        border-top: 1px solid #cccccc;
        margin: 4px 0;
      }
    }
  }
}

ul,
li {
  list-style: none;
}
</style>
